@CodiumAI-Agent /review

PR Reviewer Guide 🔍

@CodiumAI-Agent /ask

Adding an event listener inside a hook without cleanup could lead to memory leaks or multiple instances of the same listener if the component re-renders. Ensure to remove the event listener in a cleanup function.

attachCustomKeyEventHandler also there.

Ask❓

Adding an event listener inside a hook without cleanup could lead to memory leaks or multiple instances of the same listener if the component re-renders. Ensure to remove the event listener in a cleanup function. attachCustomKeyEventHandler also there.

Answer:

You are correct. Adding an event listener inside a hook without proper cleanup can lead to memory leaks or multiple instances of the same listener if the component re-renders. To address this, we should ensure that the event listener is removed when the component unmounts or when the hook is re-invoked. Here is an updated version of the useTerminal hook with the necessary cleanup:

import { useEffect, useRef } from 'react';

export const useTerminal = (commands: Command[] = []) => {
  const terminal = useRef<any>(null);
  const fitAddon = useRef<any>(null);
  let commandBuffer = '';

  useEffect(() => {
    const handleContextMenu = (e: MouseEvent) => {
      e.preventDefault();
      navigator.clipboard.readText().then((text) => {
        terminal.current?.write(text);
        commandBuffer += text;
      });
    };

    const terminalElement = terminal.current?.element;
    if (terminalElement) {
      terminalElement.addEventListener('contextmenu', handleContextMenu);
    }

    return () => {
      if (terminalElement) {
        terminalElement.removeEventListener('contextmenu', handleContextMenu);
      }
    };
  }, [terminal]);

  // Other hook logic...

  return {
    // Return values...
  };
};

In this updated version, we define the handleContextMenu function inside the useEffect hook and add it as an event listener to the terminal element. We also ensure to remove the event listener in the cleanup function returned by useEffect. This will prevent memory leaks and ensure that only one instance of the event listener is active at any time.